<template>
  <div>
    <el-dialog
      type="primary"
      :title="formDpt.id?'编辑部门':'新增部门'"
      :visible="showViewDialog"
      @close="closeDialogFn"
      @open="openFn"
    >

      <el-form ref="formDpt" label-width="120px" :model="formDpt" :rules="rules">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="formDpt.name" style="width:80%" placeholder="1-50个字符" />
        </el-form-item>
        <el-form-item label="部门编码" prop="code">
          <el-input v-model="formDpt.code" style="width:80%" placeholder="1-50个字符" />
        </el-form-item>
        <el-form-item label="部门负责人" prop="manager">
          <el-select v-model="formDpt.manager" style="width:80%" placeholder="请选择">
            <!-- 负责人选项 -->
            <el-option
              v-for="item in employeesList"
              :key="item.id"
              :value="item.username"
              :label="item.username"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍" prop="introduce">
          <el-input v-model="formDpt.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" />
        </el-form-item>
      </el-form>

      <!-- dialog带的插槽 -->
      <!-- 按钮 -->
      <template #footer>
        <div class="footer">
          <el-button size="small" @click.native="closeDialogFn">取消</el-button>
          <el-button
            type="primary"
            size="small"
            @click.native="confirmFn"
          >确定</el-button>

        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getEmployeesAPI } from '@/api/employees'
import { addDepartmentAPI, getDepartDetailAPI, updateDepartmentsAPI } from '@/api/departments'
export default {
  name: 'Add',
  props: {
    showViewDialog: {
      type: Boolean
    },
    curId: {
      type: Object,
      default() {
        return {}
      }
    },
    codeList: { // 所有code数组
      type: Array,
      default() {
        return []
      }
    }

  },

  data() {
    const validateCode = (rule, value, callback) => {
      // 1. 拿到所有的原始节点数据  allList
      // BUG:编辑的时候，必须code修改
      // 定义一个变量存储code
      let curCodeList = []// 作为判断条件的，因为codelist是双向数据绑定
      if (this.formDpt.id) {
        curCodeList = this.codeList.filter(item => item !== this.curCode)
      } else {
        curCodeList = this.codeList
      }
      if (curCodeList.includes(value)) {
        return callback(new Error('当前code码重复'))
      } else {
        callback()
      }
    }
    return {
      formDpt: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      },
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: ['blur', 'change'] }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: ['blur', 'change'] },
          { validator: validateCode, message: '部门编码要求不能重复', trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: ['blur', 'change'] }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: ['blur', 'change'] },
          { min: 1, max: 300, message: '部门介绍要求1-300个字符', trigger: ['blur', 'change'] }
        ]
      },
      employeesList: [], // 负责人列表
      curCode: null// 当前code,暂存
    }
  },
  // mounted() {
  //   this.getEmployees()
  // },
  methods: {
    async getEmployees() {
      const res = await getEmployeesAPI()
      this.employeesList = res.data
    },
    // 优化-点击再去发送接口，获取数据
    openFn() {
      this.getEmployees()
    },
    // 兜底校验 实现逻辑 调用接口
    confirmFn() {
      this.$refs.formDpt.validate(async valid => {
        if (valid) {
          // 如果通过校验
          if (this.formDpt.id) {
            // 调用接口
            await updateDepartmentsAPI(this.formDpt)
            this.$message.success('更新部门成功')// 有BUG
          } else {
            // 调用接口
            await addDepartmentAPI({ ...this.formDpt, pid: this.curId.id })// 把参数结构出来
            this.$message.success('添加部门成功')
          }

          // 把弹框关闭
          // 清楚里面的数据还有校验
          this.closeDialogFn()
          this.formDpt = {
            name: '', // 部门名称
            code: '', // 部门编码
            manager: '', // 部门管理者
            introduce: '' // 部门介绍
          }
          // 通知父组件进行，重新获取数据
          this.$emit('update-depart')
        }
      })
    },

    // 关闭弹窗
    // 子传父
    closeDialogFn() {
      this.$emit('colse-dialog')
      // 初始化数据，清空表单数据（有坑）
      this.$refs.formDpt.resetFields()
    },
    // 拉取数据
    async  getDepartDetail(id) {
      const res = await getDepartDetailAPI(id)
      console.log(res)

      this.formDpt = res.data
      this.curCode = res.data.code// 当前给一个变量
    }

  }
}
</script>

<style>
.footer{
  text-align: center;
}

</style>
